<template>
    <div>
      <div>
        <div>
          <mt-header>
            <router-link to="/" slot="left">
              <mt-button icon="back"></mt-button>
            </router-link>
            <router-link to="/login" slot="right">
              <mt-button class="register">登录</mt-button>
            </router-link>
          </mt-header>
        </div>
        <div class="pic">
          <img src="../assets/4ef05f35ddbed808ee32ee511a62c95.jpg" alt="" />
          <span>烘 焙 , 让 生 活 更 丰 富</span>
        </div>
      </div>
      <!-- 输入框 -->
      <div class="input">
        <van-form @submit="onSubmit">
          <van-field v-model="username" required clearable  name="用户名" label="用户名" placeholder="请填写用户名"
            :rules="[{ pattern: reguname, message: '中文、英文、数字但不包括下划线等符号' }]" />
          <van-field v-model="password1" required type="password" name="输入密码" label="输入密码" placeholder="请填写密码" 
            :rules="[{ pattern:regpwd, message: '4到16位（字母，数字，下划线，减号）' }]" />
          <van-field v-model="password2" required type="password" name="确认密码" label="确认密码" placeholder="请确认密码"
            :rules="[{ pattern:regpwd, message: '4到16位（字母，数字，下划线，减号）' }]" />
          <div style="margin: 16px; width: 270px;">
            <van-button style="background-color: rgb(235, 135, 114); border-color: rgb(235, 135, 114);" round block
              type="info" native-type="submit">立即注册</van-button>
          </div>
          <router-link to='login'></router-link>
        </van-form>
        <!-- <div style="float: right;">
          <router-link to="/register">没有账号？点击注册</router-link>
        </div> -->
      </div>
    </div>
  </template>
  
  <script>
  import Vue from 'vue';
  import { Form } from 'vant';
  import { Field } from 'vant';
  import { Toast } from 'vant';
  
  Vue.use(Toast);
  Vue.use(Form);
  Vue.use(Field);
  export default {
    data() {
      return {
        username: '',  //输入的用户名
        password1: '', //输入的密码
        password2: '', //确认密码
        reguname: /^[\u4E00-\u9FA5A-Za-z0-9]+$/,  //正则，中文、英文、数字但不包括下划线等符号
        regpwd: /^[a-zA-Z0-9_-]{4,16}$/,    //正则，4到16位（字母，数字，下划线，减号）
      };
    },
    methods: {
      onSubmit() {
        if (this.username == "" || this.password1 == "" || this.password2 == "") {
          Toast('请完善信息');
        } else if (this.password1 != this.password2) {
          Toast('两次密码输入不一致');
        } else {
          let params = `uname=${this.username}&upwd=${this.password1}&upwd2=${this.password2}`
          this.$axios.post("/register", params).then(res => {
            console.log(res)
            console.log(params)
            if (res.data.code == 200) {
              this.$router.push('/login')
            }else if(res.data.code == 201){
              Toast('用户名已被占用');
            }
          })
        }
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .input {
    margin-left: 37px;
    margin-right: 37px;
    margin-top: 70px;
    margin-bottom: 0px;
    width: 300px;
    height: 148px;
  }
  
  .mint-header {
    margin: 10px;
    background-color: white;
    color: black;
  }
  
  
  
  .pic {
    text-align: center;
  }
  
  .pic>img {
    height: 300px;
  }
  
  .pic>span {
    display: block;
    margin-top: -50px;
    font-family: Cascadia Code;
    color: rgb(235, 135, 114);
  }
  
  .register {
    color: rgb(235, 135, 114);
    border: 2px solid rgb(235, 135, 114);
    height: 30px;
    padding: 5px 6px 8px 6px;
    font-family: Cascadia Code;
    font-size: 15px;
  }
  </style>